var scrollBar = (function (doc) {
    return function (container, inner) {
        var _s = function (s) {
            return doc.querySelector(s);
        };

        var sidebar = null;
        var ul = null;

        if (typeof container === 'string') {
            sidebar = _s(container);
        } else {
            sidebar = container
        }

        if (typeof inner === 'string') {
            ul = _s(inner);
        } else {
            ul = inner
        }

        var maxHeight = doc.documentElement.clientHeight - 45; //45 为顶部的高度

        var block = {
            el: doc.createElement('div'),
            show: function () {
                this.el.style.display = 'block';
            },
            hide: function () {
                this.el.style.display = 'none';
            },
            visibility: function (h) {
                if (h < 0) {
                    block.show();
                } else {
                    block.hide();
                }
            },
            init: function () {
                sidebar.appendChild(this.el);
                this.el.style.cssText = [
                    'display: none',
                    'position: absolute',
                    'top: 0',
                    'right: 0',
                    'width: 5px',
                    'height: 200px',
                    'background: rgba(0, 0, 0, 0.2)'
                ].join(';');
            }
        };

        block.init();
        // 初始化内部元素
        ul.style.top = 0;
        ul.style.width = '100%';
        ul.style.position = 'absolute';

        // 初始化外部容器
        sidebar.style.height = maxHeight + 'px';
        sidebar.style.overflow = 'hidden';
        var posAttr = window.getComputedStyle(sidebar, null).position;
        if (posAttr === 'static') {
            sidebar.style.position = 'relative';
        }

        sidebar.addEventListener('click', function (ev) {
            var h = sidebar.clientHeight - ul.clientHeight;
            block.visibility(h);
        });

        var t = 0;
        sidebar.addEventListener('mousewheel', function (evt) {
            console.log('top', t);
            var h = sidebar.clientHeight - ul.clientHeight;
            if (h < 0) {
                block.show();
                t += evt.wheelDelta / 4;
                if (t > 0) {
                    t = 0;
                } else if (t < h) {
                    t = h;
                }
            } else {
                block.hide();
            }
            var persent = t / h;
            console.log('persent', persent);
            ul.style.top = t + 'px';
            block.el.style.top = (maxHeight - block.el.clientHeight) * persent + 'px';
        });

        sidebar.addEventListener('mouseover', function (ev) {
            var h = sidebar.clientHeight - ul.clientHeight;
            block.visibility(h);
        });

        sidebar.addEventListener('mouseout', function (ev) {
            block.hide();
        });

    };
})(document);
